<template>
	<!-- 订单管理 -->
	<div id="tops">
		<div class="Box">
			<el-scrollbar>
				<div class="filter-container overa">
					<div class="filter-item" :model="formInline">
						<el-input v-model="formInline.title" placeholder="请输入订单编号" clearable></el-input>

						<el-select v-model="formInline.status" placeholder="选择订单状态" clearable>
							<el-option v-for="item in optionars" :key="item.id" :label="item.name" :value="item.id"> </el-option>
						</el-select>

						<el-button type="primary" @click="lliste" icon="el-icon-search" v-insert="['operation:order:list']">查找</el-button>
						<div>
							<el-date-picker value-format="timestamp" type="datetime" v-model="formInline.gmtStart" placeholder="选择开始日期"
							 @change="showe" style="width: 25%"></el-date-picker>
							<el-date-picker value-format="timestamp" type="datetime" v-model="formInline.gmtEnd" placeholder="选择结束日期"
							 @change="shows" style="width: 25%"></el-date-picker>
							<el-select v-model="formInline.ostatus" placeholder="待出库" clearable>
								<el-option v-for="item in optionars" :key="item.id" :label="item.name" :value="item.id"> </el-option>
							</el-select>
							<el-button type="primary" icon="el-icon-download" @click="deriveExcel">导出</el-button>
							<el-button type="primary" icon="el-icon-download" @click="summary">汇总</el-button>
						</div>
					</div>
					<!-- 编辑、发货、退款弹窗 -->
					<el-dialog :title="title" status-icon :visible.sync="dialogForm2" class="on" v-if="dialogForm2">
						<el-form status-icon :model="rovel" label-width="100px" ref="rovel">
							<el-form-item label="等级" v-if="title == '编辑'">
								<el-radio-group v-model="userLevel">
									<el-radio :label="0">无色</el-radio>
									<el-radio :label="1">绿色</el-radio>
									<el-radio :label="2">橙黄</el-radio>
									<el-radio :label="3">红色</el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="内容" v-if="title == '编辑'">
								<el-input type="text" v-model="adminMono" style="width: 50%"></el-input>
							</el-form-item>
							<!-- 退款 -->
							<el-form-item label="tips" v-if="title == '退款'">
								<span>允许退款后钱会退回对方账户，请确认您已经收到退货</span>
							</el-form-item>
							<el-form-item label="操作" v-if="title == '退款'">
								<el-radio-group v-model="typer">
									<el-radio :label="0">拒绝退款</el-radio>
									<el-radio :label="1">允许退款</el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="金额" v-if="title == '退款'&& typer == 1? true :false">
								<el-input type="text" v-model="sum" style="width: 50%">
									<!-- <template slot-scope="scope">{{scope.row.payPrice/100}}</template> -->
								</el-input>
							</el-form-item>
							<!-- 发货 -->
							<el-form-item label="快递公司" v-if="title == '发货'">
								<el-select v-model="rovel.lipCorde">
									<el-option v-for=" (item ,index) in arr" :key="index" :label="item.name" :value="item.id">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="快递编号" v-if="title == '发货'">
								<el-input type="text" v-model="rovel.derNo" style="width: 50%"></el-input>
							</el-form-item>
						</el-form>
						<span slot="footer" class="dialog-footer">
							<el-button @click="dialogForm2 = false">取 消</el-button>
							<el-button type="primary" @click="demilar">确 定</el-button>
						</span>
					</el-dialog>
					<!-- 详情弹窗 -->
					<el-dialog title="订单详情" status-icon :visible.sync="dialogFormVisible" class="on" v-if="dialogFormVisible">
						<el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px">
							<el-form-item label="订单编号">
								{{list.orderNo}}
							</el-form-item>
							<el-form-item label="用户ID">
								{{list.userId}}
							</el-form-item>
							<el-form-item label="订单渠道">
								{{list.channel}}
							</el-form-item>
							<el-form-item label="订单状态">
								<el-tag type="primary" plain>{{ list.status == 10 ? "未付款" :  list.status == 12 ?"正在拼团":  list.status == 20 ? "待出库" :  list.status == 30 ?"待收货" : list.status == 40 ?'待评价': list.status == 50 ?'已完成':list.status == 60 ?'退款中':list.status == 70 ?'已退款':list.status == 80 ?'已取消': '已取消(系统)'}}</el-tag>
							</el-form-item>
							<el-form-item label="支付渠道">
								<el-tag type="primary" plain>
									{{list.payChannel == 'OFFLINE' ? '线下支付' : list.payChannel == 'WX' ? '微信支付' : '未支付'}}
								</el-tag>
							</el-form-item>
							<el-form-item label="用户留言">
							</el-form-item>
							<el-form-item label="客服备注">
								<span style="padding-right: 10px;">{{list.adminMono}}</span>
								<el-button type="primary" @click="update('编辑',list)">编辑</el-button>
							</el-form-item>
							<el-form-item label="配送费用">
								<!-- {{list.orderNo}} -->
								免运费
							</el-form-item>
							<el-form-item label="收获信息">
								（收货人）{{list.consignee}} (手机号) {{list.phone}} (地址) {{list.province}}{{list.city}}{{list.county}}{{list.address}}
							</el-form-item>
							<el-form-item label="商品信息">
								<el-table :data="list.skuList" border style="width:100%">
									<el-table-column align="center" prop="spuTitle" label="名称">

									</el-table-column>
									<el-table-column align="center" prop="title" label="规格">

									</el-table-column>
									<el-table-column align="center" prop="num" label="商品数量">

									</el-table-column>
									<el-table-column align="center" prop="unit" label="单位">

									</el-table-column>
									<el-table-column align="center" prop="price" label="总价(单价*数量)">
										<template slot-scope="scope">
											{{(scope.row.price*scope.row.num/100)}}
										</template>
									</el-table-column>
								</el-table>
							</el-form-item>
						</el-form>
					</el-dialog>
				</div>
				<el-main class="Main">
					<!-- 单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。 -->
					<el-table id="table" :data="tableData" border style="width: 100%" :cell-class-name="cellStyle"
					 highlight-current-row empty-text="暂无数据" size="mini" v-loading="loading" element-loading-text="正在查询中。。。">
						<el-table-column type="expand">
							<template slot-scope="props">
								<el-form label-position="left" class="demo-table-expand">
									<el-form-item label="联系人">
										<span>{{ props.row.consignee }}</span>
									</el-form-item>
									<el-form-item label="联系电话">
										<span>{{ props.row.phone }}</span>
									</el-form-item>
									<el-form-item label="客服备注">
										<span>{{ props.row.adminMono? props.row.adminMono:'无'}}</span>
									</el-form-item>
								</el-form>
							</template>
						</el-table-column>
						<el-table-column align="center" prop="orderNo" label="订单编号" width="180">

						</el-table-column>
						<el-table-column align="center" prop="userId" label="用户ID">
						</el-table-column>
						<el-table-column align="center" prop="status" label="订单状态" width="120">
							<template slot-scope="scope">
								<el-tag type="primary" plain>{{scope.row.status | filterA()}}</el-tag>
							</template>
						</el-table-column>
						<el-table-column align="center" prop="payChannel" label="支付渠道" width="110">
							<template slot-scope="scope">
								<el-tag type="primary" plain>
									{{scope.row.payChannel == 'OFFLINE' ? '线下支付' : scope.row.payChannel == 'WX' ? '微信支付' : '未支付'}}</el-tag>
							</template>
						</el-table-column>
						<el-table-column align="center" prop="skuTotalPrice" label="订单金额" width="100">
							<template slot-scope="scope">
								￥{{scope.row.skuTotalPrice/100}}
							</template>
						</el-table-column>
						<el-table-column align="center" prop="categoryId" label="创建时间" width="140">
							<template slot-scope="scope">
								<!-- 时间转换 -->
								{{ getYMDHMS(scope.row.gmtCreate) }}
							</template>
						</el-table-column>
						<el-table-column align="center" prop="shlipCorde" label="物流渠道" width="140">

							<template slot-scope="scope">
								<!-- <el-tag type="primary" plain>
									{{scope.row.shlipCorde | filterB()}}
								</el-tag> -->
								<el-tag type="primary">
									{{
								        scope.row.shipCode == "YTO" ? '圆通速递':
								        scope.row.shipCode == "YD" ? '韵达速递':
								        scope.row.shipCode == "STO" ? '申通速递':
								        scope.row.shipCode == "SF" ? '顺丰速运':
								        scope.row.shipCode == "HTKY" ? '百世快速':
								        scope.row.shipCode == "ZTO" ? '中通快速':
								        scope.row.shipCode == "YZPY" ? '邮政快递包裹':
								        scope.row.shipCode == "EMS" ? 'EMS':
								        scope.row.shipCode == "HHTT" ? '天天快递':
								        scope.row.shipCode == "JD" ? '京东快递':
								        scope.row.shipCode == "UC" ? '优速快递':
								        scope.row.shipCode == "DBL" ? '德邦快递':
								        scope.row.shipCode == "ZJS" ? '宅急送':
								        scope.row.shipCode == "TNT" ? 'YNT快递':
								        '未发货'
								       }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column align="center" prop="shipNo" label="物流单号" width="200">
						</el-table-column>
						<el-table-column align="center" prop="adminMono" label="备注" width="200">
						</el-table-column>
						<el-table-column label="操作" align="center" width="300">
							<template slot-scope="scope">
								<el-button type="primary" @click="details(scope.row)" size="mini" v-insert="['operation:order:detail']">详情</el-button>
								<el-button type="primary" @click="update('退款',scope.row)" v-if="scope.row.status == 60" size="mini" v-insert="['operation:order:refund']">退款</el-button>
								<el-button type="primary" @click="delivery(scope.row)" v-if="scope.row.status == 20" size="mini" v-insert="['operation:order:detail']">配送单</el-button>
								<el-button type="primary" @click="update('发货',scope.row)" v-if="scope.row.status ==20" size="mini" v-insert="['operation:order:ship']">发货</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-main>
				<el-container>
					<el-header class="buttom">
						<div class="block1">
							<span class="demonstration"></span>
							<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper"
							 :page-size="count" :total="total" :page-sizes="[10, 20, 30, 40, 50, 100]">
							</el-pagination>
						</div>
					</el-header>
				</el-container>
			</el-scrollbar>
		</div>
	</div>
</template>
<script>
	import {
		Orderlist,
		Orderxqder,
		Orderfhder,
		Ordertkder,
		OrderUpdate,
		OrderExport,
		OrderSummary
	} from '../../api/ordermanage.js'
	import FileSaver from 'file-saver'
	import XLSX from 'xlsx'
	export default {
		data() {
			return {
				userLevel: [],
				adminMono: '',
				id: '',
				rovel: {
					lipCorde: 'NONE',
					derNo: '',
					ordrferNo: ''
				},
				typer: 0,
				sum: '',
				tableData: [],
				loading: true,
				count: 20, // 20条分页
				optionars: [{
					id: 10,
					name: '未付款'
				}, {
					id: 12,
					name: '正在拼团'
				}, {
					id: 20,
					name: '待出库'
				}, {
					id: 30,
					name: '待收货'
				}, {
					id: 40,
					name: '待评价'
				}, {
					id: 50,
					name: '已完成'
				}, {
					id: 60,
					name: '退款中'
				}, {
					id: 70,
					name: '已退款'
				}, {
					id: 80,
					name: '已取消'
				}, {
					id: 90,
					name: '已取消(系统)'
				}],
				arr: [{
						id: 'NONE',
						name: '无需物流公司'
					},
					{
						id: 'SF',
						name: '顺丰快递'
					},
					{
						id: 'DBL',
						name: '德邦快递'
					},
					{
						id: 'YZPY',
						name: '邮政快递包裹'
					},
					{
						id: 'EMS',
						name: 'EMS'
					},
					{
						id: 'HTKY',
						name: '百事快递'
					},
					{
						id: 'ZTO',
						name: '中通快递'
					},
					{
						id: 'STO',
						name: '申通快递'
					},
					{
						id: 'YTO',
						name: '圆通快递'
					},
					{
						id: 'HHTT',
						name: '天天快递'
					},
					{
						id: 'YD',
						name: '韵达快递'
					},
					{
						id: 'JD',
						name: '京东快递'
					},
					{
						id: 'UC',
						name: '优速快递'
					},
					{
						id: 'ZJS',
						name: '宅急送'
					},
					{
						id: 'TNT',
						name: 'TNT快递'
					}
				],
				total: 1, // 页数
				dialogFormVisible: false, // 弹框的状态
				dialogForm2: false, // 弹框的状态
				ordrferNo: '',
				title: '',
				pageNo: 1,
				list: [],
				value: '',
				formInline: {
					gmtStart: '',
					gmtEnd: '',
					status: null,
					ostatus: null
				},

				ruleForm: {
					title: '',
					barcode: '',
					categoryId: '',
					status: null
				},
				shijianc: null,
				shijiancew: null
			}
		},
		filters: {
			// 订单状态
			filterA(refundStatus) {
				switch (refundStatus) {
					case 10:
						return '未付款'
					case 12:
						return '正在拼团'
					case 20:
						return '待出库'
					case 30:
						return '待收货'
					case 40:
						return '待评价'
					case 50:
						return '已完成'
					case 60:
						return '退款中'
					case 70:
						return '已退款'
					case 80:
						return '已取消'
					case 90:
						return '已取消(系统)'
				}
			}
		},
		methods: {
			showe(e) {
				console.log('asd')
				console.log(e)
				console.log('asd')
				this.shijianc = e
			},
			shows(e) {
				console.log('eeeee')
				console.log(e)
				console.log('eeeee')
				this.shijiancew = e
			},
			//  详情弹出框
			details(row) {
				this.dialogFormVisible = true
				Orderxqder(row.id).then((response) => {
					console.log(response, '45456456')
					this.list = response.data.data
					console.log(this.list, 'Asdasq')
				})
			},
			// 退款 发货 编辑弹窗
			update(type, row) {
				this.dialogForm2 = true
				console.log('type :>> ', type, row)
				if (type == '编辑') {
					this.title = '编辑'
					this.userLevel = row.adminMonoLevel
					this.adminMono = row.adminMono
					this.id = row.id
				} else if (type == '发货') {
					this.title = '发货'
					// this.rovel.ordrferNo = row.orderNo
					this.rovel = {
						lipCorde: 'NONE',
						derNo: '',
						ordrferNo: row.orderNo
					}
				} else {
					this.title = '退款'
					this.rovel.ordrferNo = row.orderNo
					this.sum = row.payPrice / 100
				}
			},
			demilar() {
				if (this.title == '编辑') {
					const data = {
						orderId: this.id,
						level: this.userLevel,
						mono: this.adminMono
					}
					console.log(data)
					OrderUpdate(data).then((response) => {
						console.log(response)
						if (response.data.errmsg == '成功') {
							this.lliste()
							this.list.adminMono = this.adminMono
							this.list.adminMonoLevel=this.userLevel
							this.dialogForm2 = false
							this.$message({
								type: 'success',
								message: '客服备注成功！'
							})
						} else {
							this.$message.error({
								type: 'info',
								message: response.data.errmsg
							})
						}
					})
				} else if (this.title == '发货') {
					const data = {
						orderNo: this.rovel.ordrferNo,
						shipCode: this.rovel.lipCorde,
						shipNo: this.rovel.derNo
					}
					console.log(data)
					Orderfhder(data).then((response) => {
						console.log(response)
						if (response.data.errmsg == '成功') {
							this.lliste()
							this.dialogForm2 = false
							this.$message({
								type: 'success',
								message: '确认发货成功！'
							})
						} else {
							this.$message.error({
								type: 'info',
								message: response.data.errmsg
							})
						}
					})
				} else {
					const data = {
						orderNo: this.rovel.ordrferNo,
						sum: this.sum * 100,
						type: this.typer
					}
					console.log(data)
					Ordertkder(data).then((response) => {
						console.log(response)
						if (response.data.errmsg == '成功') {
							this.lliste()
							this.dialogForm2 = false
							this.$message({
								type: 'success',
								message: '确认退款成功！'
							})
						} else {
							this.$message.error({
								type: 'info',
								message: response.data.errmsg
							})
						}
					})
				}
			},
			// 设置指定行、列、具体单元格颜色:cell-class-name设置
			// 单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。
			cellStyle({
				row,
				columnIndex
			}) {
				if (row.adminMonoLevel === 1 && columnIndex === 1) { // 指定坐标rowIndex ：行，columnIndex ：列
					return 'success-row'
				} else if (row.adminMonoLevel === 2 && columnIndex === 1) {
					return 'warning-row'
				} else if (row.adminMonoLevel === 3 && columnIndex === 1) {
					return 'danger-row'
				}
			},
			// 时间戳转换
			getYMDHMS(timestamp) {
				if (timestamp) {
					const time = new Date(timestamp)
					const year = time.getFullYear().toString().padStart(2)
					const month = (time.getMonth() + 1).toString().padStart(2)
					const date = time.getDate().toString().padStart(2, '0')
					const hours = time.getHours().toString().padStart(2)
					const minute = time.getMinutes().toString().padStart(2)
					const second = time.getSeconds().toString().padStart(2)
					return (month + '月' + date + '日' + hours + '时' + minute + '分')
				} else {
					return '无'
				}
			},
			// 渲染数据列表
			lliste() {
				const data = {
					page: this.pageNo,
					limit: this.count,
					status: this.formInline.status,
					orderNo: this.formInline.title
				}
				Orderlist(data).then((response) => {
					console.log(response, '78789789')
					if (response.data.errmsg == '成功') {
						this.loading = false
						this.tableData = response.data.data.items
						this.total = response.data.data.total
						this.count = response.data.data.pageSize
					} else {
						setTimeout(() => {
							this.loading = false
						}, 5000)
					}
				})
			},
			// 分页
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`)
				this.count = val
				this.lliste()
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`)
				this.pageNo = val
				this.lliste()
			},
			// 汇总
			summary() {
				const datas = {
					gmtStart: this.formInline.gmtStart,
					gmtEnd: this.formInline.gmtEnd
				}
				OrderSummary(datas).then((res) => {
					console.log(res.data.data)
					if (res.data.data) {
						var filename = '订单信息.xlsx' // 文件名称
						const da = []
						res.data.data.map((item) => {
							da.push([
								item.spuTitle,
								item.spuId,
								item.skuTitle,
								item.skuId,
								item.num
							])
						})
						var data = [
							['商品名称', 'spuId', '规格', 'skuId', '数量'], ...da
						] // 数据，一定注意需要时二维数组
						var ws_name = 'Sheet1' // Excel第一个sheet的名称
						var wb = XLSX.utils.book_new()
						var ws = XLSX.utils.aoa_to_sheet(data)
						XLSX.utils.book_append_sheet(wb, ws, ws_name) // 将数据添加到工作薄
						XLSX.writeFile(wb, filename) // 导出Excel
					} else {
						this.$message.error('没有信息可以打印')
					}
				})
			},
			// 导出
			deriveExcel() {
				const data = {
					status: this.formInline.status,
					gmtStart: this.formInline.gmtStart,
					gmtEnd: this.formInline.gmtEnd
				}
				console.log(data)
				OrderExport(data).then((res) => {
					console.log(res, 'asdqwezxc')
					if (res.data.errmsg == '成功') {
						this.lliste()
						const obj = res.data.data
						console.log(this.formInline.ostatus)

						if ((this.formInline.ostatus != '' && this.formInline.ostatus != 12) || (this.formInline.gmtStart != '' && this
								.shijianc <= this.shijiancew)) {
							var _data = [
								['订单编号', '商品名称', '规格', '单位', '配送数量', '配送地址', '收货人', '联系方式', '区域划分', '客服备注', '用户备注']
							]
							for (let i = 0; i < obj.length; i++) {
								const objs = [
									obj[i].skuList[0].orderNo,
									obj[i].skuList[0].spuTitle,
									obj[i].skuList[0].title,
									obj[i].skuList[0].num,
									obj[i].skuList[0].unit,
									obj[i].province + obj[i].city + obj[i].county + obj[i].address,
									obj[i].consignee,
									obj[i].phone,
									obj[i].province + obj[i].city + obj[i].county,
									obj[i].adminMono,
									obj[i].consignee
								]
								_data.push(objs)
							}
							const ws = XLSX.utils.aoa_to_sheet(_data)
							const wb = XLSX.utils.book_new()
							XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
							XLSX.writeFile(wb, '优惠券.xlsx')
						} else {
							this.$message.error('没有信息可以打印')
						}
					} else {
						this.$message.error({
							type: 'info',
							message: res.data.errmsg
						})
					}
				})
			},
			// 单行导出
			delivery(row) {
				// exportExcels(e) {  // 导出表格所用
				// 导出excel文件
				// let id = {
				// 	orderId:, //订单Id
				// }
				Orderxqder(row.id).then((res) => {
					console.log(res)
					var _data = [
						['订单编号', '商品名称', '规格', '单位', '配送数量', '配送地址', '收货人', '联系方式', '区域划分', '客服备注', '用户备注']
					]
					const obj = [
						res.data.data.orderNo,
						res.data.data.skuList[0].spuTitle,
						res.data.data.skuList[0].title,
						res.data.data.skuList[0].unit,
						res.data.data.skuList[0].num,
						res.data.data.province + res.data.data.city + res.data.data.county + res.data.data.address,
						res.data.data.consignee,
						res.data.data.phone,
						res.data.data.province + res.data.data.city + res.data.data.county
					]
					_data.push(obj)
					const ws = XLSX.utils.aoa_to_sheet(_data)
					const wb = XLSX.utils.book_new()
					XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
					XLSX.writeFile(wb, '优惠券.xlsx')
				})
			}
		},
		created() {
			this.lliste()
		}
	}
</script>

<style scoped="scoped" lang="less">
	// 头部
	#tops {
		width: 100%;
		overflow: hidden;
		// background-color: pink;
	}

	// 头部
	.Box {
		width: 100%;
		overflow: hidden;
		// height: 900px;
	}

	// 中间
	.el-main {
		// background-color: #E9EEF3;
		color: #333;
		text-align: center;
		width: 100%;
		overflow: hidden;
		overflow-x: auto;
	}

	// 底部
	.buttom {
		// background-color: #B3C0D1;
		color: #333;
		// text-align: center;
		width: 100%;
		height: 130px !important;
	}

	.filter-container {
		width: 100%;
		height: 54px;
		line-height: 60px;
	}

	img {
		width: 80px;
	}

	.filter-item {
		display: inline-block;
		vertical-align: middle;
		margin-bottom: 10px;
		margin-right: 4px;
		float: left;
		margin-left: 20px;
	}

	.el-input {
		width: 200px !important;
		padding-left: 4px !important;
	}

	// .el-scrollbar {
	// 	height: 600px !important;
	// }

	.on .el-input {
		width: 300px !important;
	}

	.el-table--border,
	.el-table--group {
		font-size: 10px !important;
	}

	.el-pagination {
		padding: 24px 10px !important;
	}

	/* 头像上传 */
	.avatar-uploader .el-upload {

		position: relative;
		overflow: hidden;
	}

	.avatar-uploader-icon:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 120px;
		height: 120px;
		line-height: 120px;
		text-align: center;
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
	}

	.avatar {
		width: 120px;
		height: 120px;
		display: block;
	}

	::v-deep .el-select {
		margin: 0 5px;
	}

	::v-deep .el-form-item__label {
		text-align: left;
	}

	::v-deep .el-form-item__content {
		margin-left: 0px !important;
	}

	::v-deep .el-table .warning-row {
		background: rgb(197, 175, 142);
	}

	::v-deep .el-table .danger-row {
		background: rgb(201, 143, 143);
	}

	::v-deep .el-table .success-row {
		background: rgb(166, 202, 149);
	}

	::v-deep .overa .el-dialog__body {
		padding: 0 20px 20px 20px !important;
	}
</style>
